<template>
	<div class="topic-Con">
    <div class="topic-detail" v-if="!empty">
        <div class="topic-header">
            <div class="layout">

              <div class="title">{{title}}</div>

              <div class="author-info">
                  <div class="icon">
                    <div class="avatar">
                      <img v-if="headImg" :src="headImg"/>
                      <!--<img v-else src="../assets/image/common/me_icon_bighead_default@2x.png"/>-->
                      <img v-else src="../assets/image/common/default-icon-fox.jpg" alt="">
                    </div>
                    <i class="userTypeTag" :class='typeTagInfo.class' >{{typeTagInfo.txt}}</i>
                  </div>
                  <div class="info">
                      <div class="line-f">
                          <span class="name">{{authorName}}</span>
                          <!-- <span class="subject">语文</span> -->
                      </div>
                      <div class="line-t" v-if='tagsList&&tagsList.length>0'>
                        <i v-for="(tag,index) in tagsList" :key='index' :id='"tag"+index'>{{tag.agencyName+`${tag.title == '' ? '' : '--'+tag.title}`}}</i>
                      </div>
                      <div class="line-s">
                          <span class="time">{{formatTopicTime(publishTime)}}</span>
                          <!-- <span class="from">来自[其他]</span> -->
                      </div>
                  </div>
                  <div class="focus" @click="down">+ 关注</div>
              </div>

              <div class="author-topic"> {{content.length != 0 ?stringToEmoji(content).join('') : ''}} </div>

              <div class="pictureList" v-if="pictureList.length > 0" >
                <!-- <div class="inner-pics" v-for="(pictureListEach,index) in pictureList" :key="index"> 
                  <img :src="pictureListEach"/>
                </div> -->
                <div v-if="pictureList.length" class="img-wrap">
                  <span v-for="(pic, index) in pictureList" :key="index"
                        v-crop="{
                          src: pic,
                          width: 210/72,
                          height: 210/72,
                          unit: 'rem'
                        }"></span>
                </div>
              </div>

              <div class="author-stars" @click="down">
                  <ul class="clear">
                      <li class="left">
                          <span class="watch">{{viewCount}}</span>
                      </li>
                      <li class="right">
                          <span class="zan">{{likeCount}}</span>
                      </li>
                      <li class="right">
                          <span class="ping">{{replyCount}}</span>
                      </li>
                  </ul>
              </div>

          </div>
      </div>
      <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
        <div class="topic-list">
            <div class="layout">
                <p class="topic-tit">评论</p>
                <ul class="topic-ul" v-if="replyList.length > 0">
                  <li v-for="(replyListEach,index) in replyList" :key="index">
                    <div class="person_li">
                      <div class="icon">
                        <div class="avatar">
                          <img v-if="replyListEach.repayUserHeadImg" :src="replyListEach.repayUserHeadImg"/>
                          <!--<img v-else src="../assets/image/common/me_icon_bighead_default@2x.png"/>-->
                          <img v-else src="../assets/image/common/default-icon-fox.jpg" alt="">
                        </div>
                        <i class="userTypeTag" :class='getUserTypeText(replyListEach.repayUser.userType,replyListEach.repayUser.hasProfession,replyListEach.repayUser.professionVo&&replyListEach.repayUser.professionVo.profession).class'>
                          {{getUserTypeText(replyListEach.repayUser.userType,replyListEach.repayUser.hasProfession,replyListEach.repayUser.professionVo&&replyListEach.repayUser.professionVo.profession).txt}}
                        </i>
                      </div>
                      <div class="person_info">
                        <span class="info_name_time">
                          <p class="name">{{replyListEach.repayUserName}}</p>
                          <p class="time">{{replyListEach.floor}}楼  |  {{replyListEach.publishTime}}</p>
                        </span>
                        <span class="zan" @click="down">{{replyListEach.likeCount}}</span>                        
                        <span class="ping" @click="down">{{replyListEach.replayCount}}</span>
                      </div>
                    </div>
                    <div class="ping_li">
                      <p>{{replyListEach.content || ""}}</p>
                      <div class="comment-list" v-if="replyListEach.replyList&&replyListEach.replyList.length > 0">
                        <ul class="comment-ul">
                          <li v-for="(replyListreplyListEach,index) in replyListEach.replyList" :key="index">
                            <b>{{replyListreplyListEach.repayUserName}}</b>回复<b>{{replyListreplyListEach.toUserName}}：</b>{{replyListreplyListEach.content}}
                          </li>
                        </ul>
                      </div>
                    </div>
                  </li>
                </ul>
                <div class="no-data" v-if="replyList.length == 0">
                  <img src="../assets/image/topicDetail/no-data.png"/>
                  <div class="no-reply">还没有评论，来抢沙发吧</div>
                </div>
            </div>
        </div>
      </div>
    </div>
    <empty-detail page="answer" :message="message" v-show="empty"/>
    <down-load  :hasShare="hasShare"></down-load>
        
	</div>
  
</template>
<script>
import Vue from "vue";
import api from "@/api";
import {formatTime} from '@/utils'
import EmptyDetail from "@/pages/emptyDetail";
import downLoad from '@/components/common/download/downLoad.vue';
import infiniteScroll from "vue-infinite-scroll";
Vue.use(infiniteScroll);
export default {
  name: "home",
  data() {
    return {
      hasShare:true,
      empty: false,
      message: "",
      downShow: true,
      authorName: "",
      headImg: "",
      likeCount: 0,
      publishTime: "",
      replyCount: 0,
      viewCount: 0,
      content: "",
      title: "",
      replyList: [],
      pictureList: [],
      pageNo: 1,
      nextStartIndex: 0,
      nextStart: 0,
      busy: true,
      appId: "wx921f8ebbe6ced2c2",
      wxSharePic: "https://static.shengxue985.com/oss/20180830/e5089c21aa9249e0bd121f7a7e21b582.png",
      typeTagInfo:'',
      tagsList:[]
    };
  },
  created() {
    this.getTopicInfo(this.pageNo, this.nextStartIndex);
  },
  mounted(){
    let self = this
    this.$nextTick(()=>{
      var tagsInterval = setInterval(()=>{
        if(!document.querySelectorAll('.line-t i').length>0){return false}
        clearInterval(tagsInterval)
        const nodes = document.querySelectorAll('.line-t i') //[0].offsetLeft
        const parentNode = document.querySelector('.line-t')
        if(nodes.length>1){
          const mairginLeft =document.querySelector('body').offsetWidth/720*12
          let nodesWidth =0
          nodes.forEach((node,index)=>{
            nodesWidth +=(node.offsetWidth+mairginLeft)
            if(nodesWidth>parentNode.offsetWidth&&node.offsetWidth-(nodesWidth-parentNode.offsetWidth)>document.querySelector('body').offsetWidth/720*120){
              nodes[index].className='lastTag'
              nodes[index].style.width= parentNode.offsetWidth-(nodesWidth-node.offsetWidth)+'px'
            }
          })
        }
        
      },50)
      
    })
  },
  components: {
    downLoad,
    EmptyDetail
  },
  methods: {
    formatTopicTime(time){
      return formatTime(time)
    },
    loadMore: function() {
      this.busy = true;
      this.pageNo++;
      this.getTopicInfo(this.pageNo, this.nextStart);
    },
    down: function() {
      window.location =
        "http://a.app.qq.com/o/simple.jsp?pkgname=com.sx985.am";
    },
    listenClose: function() {
      this.downShow = false;
    },
    getTopicInfo(pageNo, nextStartIndex) {
      let params = {
        pageSize: 5,
        pageNo: pageNo,
        replyStartIndex: nextStartIndex,
        topicId: this.$route.query.topicId
      };
      api
        .getTopicInfo(params)
        .then(res => {
          if (res.data.code == 0) {
            let data = res.data.data;
            if (data.topic) {
              this.authorName = data.topic.authorName;
              this.headImg = data.topic.headImg;
              this.likeCount = data.topic.likeCount || 0;
              this.publishTime = data.topic.publishTime;
              this.replyCount = data.topic.replyCount || 0;
              this.viewCount = data.topic.viewCount || 0;
              this.content = data.topic.content;
              this.title = data.topic.title;
              this.pictureList = data.topic.pictureList;
              if (data.topic.userInfoVo.professionVo.hasOwnProperty('agencyVOList')) {
                this.tagsList = data.topic.userInfoVo.professionVo&&this.tagsList.concat(data.topic.userInfoVo.professionVo.agencyVOList)
              }
              this.typeTagInfo = this.getUserTypeText(data.topic.userInfoVo.userType,data.topic.userInfoVo.hasProfession,data.topic.userInfoVo.professionVo&&data.topic.userInfoVo.professionVo.profession)
              if (this.pictureList.length > 0) {
                this.wxSharePic = this.pictureList[0];
              }
              this.secondShare(true, {
                url: window.location.href,
                appId: this.appId // 必填，公众号的唯一标识
              });
            } else {
              this.secondShare(false, {
                url: window.location.href,
                appId: this.appId // 必填，公众号的唯一标识
              });
            }
            this.nextStart = data.nextStartIndex;
            if (pageNo == 1) {
              //第一页
              if (data.replyList && data.replyList.length > 0) {
                //第一页 && length>0 isLastPage == 0 不是最后一页
                this.replyList = data.replyList;
                if (data.isLastPage == 0) {
                  //不是最后一页
                  this.busy = false;
                } else if (data.isLastPage == 1) {
                  //是最后一页
                  this.busy = true;
                }
              } else if (data.replyList && data.replyList.length == 0) {
                //第一页 && length=0 空页面
                this.busy = true;
              }
            } else {
              //不是第一页
              if (data.replyList && data.replyList.length > 0) {
                //不是第一页有数据
                this.replyList.push(...data.replyList);
                if (data.isLastPage == 0) {
                  //不是最后一页
                  this.busy = false;
                } else if (data.isLastPage == 1) {
                  //是最后一页
                  this.busy = true;
                }
              } else if (data.replyList && data.replyList.length == 0) {
                //不是第一页没数据 length=0
                this.busy = true;
              }
            }
          } else {
            this.empty = true
            this.message = res.data.message
            this.secondShare(false, {
              url: window.location.href,
              appId: this.appId // 必填，公众号的唯一标识
            });
          }
        })
        .catch(err => {
        });
    },
    //二次分享
    secondShare(hasData, params) {
      api
        .getSecondShareKey(params)
        .then(res => {
          if (res.data.code == 0) {
            let data = res.data.data;
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: data.appId, // 必填，公众号的唯一标识
              timestamp: data.timestamp, // 必填，生成签名的时间戳
              nonceStr: data.nonceStr, // 必填，生成签名的随机串
              signature: data.signature, // 必填，签名，见附录1
              jsApiList: [
                "chooseImage",
                "previewImage",
                "uploadImage",
                "downloadImage",
                "checkJsApi",
                "onMenuShareTimeline",
                "onMenuShareAppMessage",
                "onMenuShareQQ",
                "onMenuShareWeibo"
              ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            this.wxShare(hasData, {
              title: this.title || "邀您查看话题详情", // 分享标题
              desc: this.content || "升学在线,学习超给力", // 分享描述
              link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: this.wxSharePic, // 分享图标
              type: "", // 分享类型,music、video或link，不填默认为link
              dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
              success: function() {
                // 用户确认分享后执行的回调函数
              },
              cancel: function() {
                // 用户取消分享后执行的回调函数
              }
            });
          } else {
          }
        })
        .catch(err => {
        });
    },
    wxShare(hasData, config) {
      let c;
      if (!hasData) {
        c = {};
        c.title = "邀您查看话题详情";
        c.desc = "升学在线,学习超给力";
        (c.link = window.location.href), (c.imgUrl = this.wxSharePic);
      } else {
        c = config;
      }
      if (location.hash == "#debug") {
        alert(JSON.stringify(c));
      }
      wx.ready(function() {
        wx.onMenuShareAppMessage(c);
        wx.onMenuShareTimeline(c);
        wx.onMenuShareQQ(c);
        wx.onMenuShareWeibo(c);
      });
    },
    stringToEmoji(str='') {
      let emoji ={
        "😄": ":smile:",
        "😆": [":laughing:", ":D"],
        "😊": ":blush:",
        "😃": [":smiley:", ":)", ":-)"],
        "☺": ":relaxed:",
        "😏": ":smirk:",
        "😞": [":disappointed:", ":("],
        "😍": ":heart_eyes:",
        "😘": ":kissing_heart:",
        "😚": ":kissing_closed_eyes:",
        "😳": ":flushed:",
        "😥": ":relieved:",
        "😌": ":satisfied:",
        "😁": ":grin:",
        "😉": [":wink:", ";)", ";-)"],
        "😜": [":wink2:", ":P"],
        "😝": ":stuck_out_tongue_closed_eyes:",
        "😀": ":grinning:",
        "😗": ":kissing:",
        "😙": ":kissing_smiling_eyes:",
        "😛": ":stuck_out_tongue:",
        "😴": ":sleeping:",
        "😟": ":worried:",
        "😦": ":frowning:",
        "😧": ":anguished:",
        "😮": [":open_mouth:", ":o"],
        "😬": ":grimacing:",
        "😕": ":confused:",
        "😯": ":hushed:",
        "😑": ":expressionless:",
        "😒": ":unamused:",
        "😅": ":sweat_smile:",
        "😓": ":sweat:",
        "😩": ":weary:",
        "😔": ":pensive:",
        "😞": ":dissapointed:",
        "😖": ":confounded:",
        "😨": ":fearful:",
        "😰": ":cold_sweat:",
        "😣": ":persevere:",
        "😢": ":cry:",
        "😭": ":sob:",
        "😂": ":joy:",
        "😲": ":astonished:",
        "😱": ":scream:",
        "😫": ":tired_face:",
        "😠": ":angry:",
        "😡": ":rage:",
        "😤": ":triumph:",
        "😪": ":sleepy:",
        "😋": ":yum:",
        "😷": ":mask:",
        "😎": ":sunglasses:",
        "😵": ":dizzy_face:",
        "👿": ":imp:",
        "😈": ":smiling_imp:",
        "😐": ":neutral_face:",
        "😶": ":no_mouth:",
        "😇": ":innocent:",
        "👽": ":alien:",
        "💛": ":yellow_heart:",
        "💙": ":blue_heart:",
        "💜": ":purple_heart:",
        "❤": ":heart:",
        "💚": ":green_heart:",
        "💔": ":broken_heart:",
        "💓": ":heartbeat:",
        "💗": ":heartpulse:",
        "💕": ":two_hearts:",
        "💞": ":revolving_hearts:",
        "💘": ":cupid:",
        "💖": ":sparkling_heart:",
        "✨": ":sparkles:",
        "⭐️": ":star:",
        "🌟": ":star2:",
        "💫": ":dizzy:",
        "💥": ":boom:",
        "💢": ":anger:",
        "❗": ":exclamation:",
        "❓": ":question:",
        "❕": ":grey_exclamation:",
        "❔": ":grey_question:",
        "💤": ":zzz:",
        "💨": ":dash:",
        "💦": ":sweat_drops:",
        "🎶": ":notes:",
        "🎵": ":musical_note:",
        "🔥": ":fire:",
        "💩": [":poop:", ":hankey:", ":shit:"],
        "👍": [":+1:", ":thumbsup:"],
        "👎": [":-1:", ":thumbsdown:"],
        "👌": ":ok_hand:",
        "👊": ":punch:",
        "✊": ":fist:",
        "✌": ":v:",
        "👋": ":wave:",
        "✋": ":hand:",
        "👐": ":open_hands:",
        "☝": ":point_up:",
        "👇": ":point_down:",
        "👈": ":point_left:",
        "👉": ":point_right:",
        "🙌": ":raised_hands:",
        "🙏": ":pray:",
        "👆": ":point_up_2:",
        "👏": ":clap:",
        "💪": ":muscle:",
        "🚶": ":walking:",
        "🏃": ":runner:",
        "👫": ":couple:",
        "👪": ":family:",
        "👬": ":two_men_holding_hands:",
        "👭": ":two_women_holding_hands:",
        "💃": ":dancer:",
        "👯": ":dancers:",
        "🙆": ":ok_woman:",
        "🙅": ":no_good:",
        "💁": ":information_desk_person:",
        "🙋": ":raised_hand:",
        "👰": ":bride_with_veil:",
        "🙎": ":person_with_pouting_face:",
        "🙍": ":person_frowning:",
        "🙇": ":bow:",
        "💏": ":couplekiss:",
        "💑": ":couple_with_heart:",
        "💆": ":massage:",
        "💇": ":haircut:",
        "💅": ":nail_care:",
        "👦": ":boy:",
        "👧": ":girl:",
        "👩": ":woman:",
        "👨": ":man:",
        "👶": ":baby:",
        "👵": ":older_woman:",
        "👴": ":older_man:",
        "👱": ":person_with_blond_hair:",
        "👲": ":man_with_gua_pi_mao:",
        "👳": ":man_with_turban:",
        "👷": ":construction_worker:",
        "👮": ":cop:",
        "👼": ":angel:",
        "👸": ":princess:",
        "😺": ":smiley_cat:",
        "😸": ":smile_cat:",
        "😻": ":heart_eyes_cat:",
        "😽": ":kissing_cat:",
        "😼": ":smirk_cat:",
        "🙀": ":scream_cat:",
        "😿": ":crying_cat_face:",
        "😹": ":joy_cat:",
        "😾": ":pouting_cat:",
        "👹": ":japanese_ogre:",
        "👺": ":japanese_goblin:",
        "🙈": ":see_no_evil:",
        "🙉": ":hear_no_evil:",
        "🙊": ":speak_no_evil:",
        "💂": ":guardsman:",
        "💀": ":skull:",
        "👣": ":feet:",
        "👄": ":lips:",
        "💋": ":kiss:",
        "💧": ":droplet:",
        "👂": ":ear:",
        "👀": ":eyes:",
        "👃": ":nose:",
        "👅": ":tongue:",
        "💌": ":love_letter:",
        "👤": ":bust_in_silhouette:",
        "👥": ":busts_in_silhouette:",
        "💬": ":speech_balloon:",
        "💭": ":thought_balloon:",
        "☀": ":sunny:",
        "☔": ":umbrella:",
        "☁": ":cloud:",
        "❄": ":snowflake:",
        "⛄": ":snowman:",
        "⚡": ":zap:",
        "🌀": ":cyclone:",
        "🌁": ":foggy:",
        "🌊": ":ocean:",
        "🐱": ":cat:",
        "🐶": ":dog:",
        "🐭": ":mouse:",
        "🐹": ":hamster:",
        "🐰": ":rabbit:",
        "🐺": ":wolf:",
        "🐸": ":frog:",
        "🐯": ":tiger:",
        "🐨": ":koala:",
        "🐻": ":bear:",
        "🐷": ":pig:",
        "🐽": ":pig_nose:",
        "🐮": ":cow:",
        "🐗": ":boar:",
        "🐵": ":monkey_face:",
        "🐒": ":monkey:",
        "🐴": ":horse:",
        "🐎": ":racehorse:",
        "🐫": ":camel:",
        "🐑": ":sheep:",
        "🐘": ":elephant:",
        "🐼": ":panda_face:",
        "🐍": ":snake:",
        "🐦": ":bird:",
        "🐤": ":baby_chick:",
        "🐥": ":hatched_chick:",
        "🐣": ":hatching_chick:",
        "🐔": ":chicken:",
        "🐧": ":penguin:",
        "🐢": ":turtle:",
        "🐛": ":bug:",
        "🐝": ":honeybee:",
        "🐜": ":ant:",
        "🐞": ":beetle:",
        "🐌": ":snail:",
        "🐙": ":octopus:",
        "🐠": ":tropical_fish:",
        "🐟": ":fish:",
        "🐳": ":whale:",
        "🐋": ":whale2:",
        "🐬": ":dolphin:",
        "🐄": ":cow2:",
        "🐏": ":ram:",
        "🐀": ":rat:",
        "🐃": ":water_buffalo:",
        "🐅": ":tiger2:",
        "🐇": ":rabbit2:",
        "🐉": ":dragon:",
        "🐐": ":goat:",
        "🐓": ":rooster:",
        "🐕": ":dog2:",
        "🐖": ":pig2:",
        "🐁": ":mouse2:",
        "🐂": ":ox:",
        "🐲": ":dragon_face:",
        "🐡": ":blowfish:",
        "🐊": ":crocodile:",
        "🐪": ":dromedary_camel:",
        "🐆": ":leopard:",
        "🐈": ":cat2:",
        "🐩": ":poodle:",
        "🐾": ":paw_prints:",
        "💐": ":bouquet:",
        "🌸": ":cherry_blossom:",
        "🌷": ":tulip:",
        "🍀": ":four_leaf_clover:",
        "🌹": ":rose:",
        "🌻": ":sunflower:",
        "🌺": ":hibiscus:",
        "🍁": ":maple_leaf:",
        "🍃": ":leaves:",
        "🍂": ":fallen_leaf:",
        "🌿": ":herb:",
        "🍄": ":mushroom:",
        "🌵": ":cactus:",
        "🌴": ":palm_tree:",
        "🌲": ":evergreen_tree:",
        "🌳": ":deciduous_tree:",
        "🌰": ":chestnut:",
        "🌱": ":seedling:",
        "🌼": ":blossum:",
        "🌾": ":ear_of_rice:",
        "🐚": ":shell:",
        "🌐": ":globe_with_meridians:",
        "🌞": ":sun_with_face:",
        "🌝": ":full_moon_with_face:",
        "🌚": ":new_moon_with_face:",
        "🌑": ":new_moon:",
        "🌒": ":waxing_crescent_moon:",
        "🌓": ":first_quarter_moon:",
        "🌔": ":waxing_gibbous_moon:",
        "🌕": ":full_moon:",
        "🌖": ":waning_gibbous_moon:",
        "🌗": ":last_quarter_moon:",
        "🌘": ":waning_crescent_moon:",
        "🌜": ":last_quarter_moon_with_face:",
        "🌛": ":first_quarter_moon_with_face:",
        "🌙": ":moon:",
        "🌍": ":earth_africa:",
        "🌎": ":earth_americas:",
        "🌏": ":earth_asia:",
        "🌋": ":volcano:",
        "🌌": ":milky_way:",
        "⛅": ":partly_sunny:",
        "🎍": ":bamboo:",
        "💝": ":gift_heart:",
        "🎎": ":dolls:",
        "🎒": ":school_satchel:",
        "🎓": ":mortar_board:",
        "🎏": ":flags:",
        "🎆": ":fireworks:",
        "🎇": ":sparkler:",
        "🎐": ":wind_chime:",
        "🎑": ":rice_scene:",
        "🎃": ":jack_o_lantern:",
        "👻": ":ghost:",
        "🎅": ":santa:",
        "🎱": ":8ball:",
        "⏰": ":alarm_clock:",
        "🍎": ":apple:",
        "🎨": ":art:",
        "🍼": ":baby_bottle:",
        "🎈": ":balloon:",
        "🍌": ":banana:",
        "📊": ":bar_chart:",
        "⚾": ":baseball:",
        "🏀": ":basketball:",
        "🛀": ":bath:",
        "🛁": ":bathtub:",
        "🔋": ":battery:",
        "🍺": ":beer:",
        "🍻": ":beers:",
        "🔔": ":bell:",
        "🍱": ":bento:",
        "🚴": ":bicyclist:",
        "👙": ":bikini:",
        "🎂": ":birthday:",
        "🃏": ":black_joker:",
        "✒": ":black_nib:",
        "📘": ":blue_book:",
        "💣": ":bomb:",
        "🔖": ":bookmark:",
        "📑": ":bookmark_tabs:",
        "📚": ":books:",
        "👢": ":boot:",
        "🎳": ":bowling:",
        "🍞": ":bread:",
        "💼": ":briefcase:",
        "💡": ":bulb:",
        "🍰": ":cake:",
        "📆": ":calendar:",
        "📲": ":calling:",
        "📷": ":camera:",
        "🍬": ":candy:",
        "📇": ":card_index:",
        "💿": ":cd:",
        "📉": ":chart_with_downwards_trend:",
        "📈": ":chart_with_upwards_trend:",
        "🍒": ":cherries:",
        "🍫": ":chocolate_bar:",
        "🎄": ":christmas_tree:",
        "🎬": ":clapper:",
        "📋": ":clipboard:",
        "📕": ":closed_book:",
        "🔐": ":closed_lock_with_key:",
        "🌂": ":closed_umbrella:",
        "♣": ":clubs:",
        "🍸": ":cocktail:",
        "☕": ":coffee:",
        "💻": ":computer:",
        "🎊": ":confetti_ball:",
        "🍪": ":cookie:",
        "🌽": ":corn:",
        "💳": ":credit_card:",
        "👑": ":crown:",
        "🔮": ":crystal_ball:",
        "🍛": ":curry:",
        "🍮": ":custard:",
        "🍡": ":dango:",
        "🎯": ":dart:",
        "📅": ":date:",
        "♦": ":diamonds:",
        "💵": ":dollar:",
        "🚪": ":door:",
        "🍩": ":doughnut:",
        "👗": ":dress:",
        "📀": ":dvd:",
        "📧": ":e-mail:",
        "🍳": ":egg:",
        "🍆": ":eggplant:",
        "🔌": ":electric_plug:",
        "✉": ":email:",
        "💶": ":euro:",
        "👓": ":eyeglasses:",
        "📠": ":fax:",
        "📁": ":file_folder:",
        "🍥": ":fish_cake:",
        "🎣": ":fishing_pole_and_fish:",
        "🔦": ":flashlight:",
        "💾": ":floppy_disk:",
        "🎴": ":flower_playing_cards:",
        "🏈": ":football:",
        "🍴": ":fork_and_knife:",
        "🍤": ":fried_shrimp:",
        "🍟": ":fries:",
        "🎲": ":game_die:",
        "💎": ":gem:",
        "🎁": ":gift:",
        "⛳": ":golf:",
        "🍇": ":grapes:",
        "🍏": ":green_apple:",
        "📗": ":green_book:",
        "🎸": ":guitar:",
        "🔫": ":gun:",
        "🍔": ":hamburger:",
        "🔨": ":hammer:",
        "👜": ":handbag:",
        "🎧": ":headphones:",
        "♥": ":hearts:",
        "🔆": ":high_brightness:",
        "👠": ":high_heel:",
        "🔪": ":hocho:",
        "🍯": ":honey_pot:",
        "🏇": ":horse_racing:",
        "⌛": ":hourglass:",
        "⏳": ":hourglass_flowing_sand:",
        "🍨": ":ice_cream:",
        "🍦": ":icecream:",
        "📥": ":inbox_tray:",
        "📨": ":incoming_envelope:",
        "📱": ":iphone:",
        "🏮": ":izakaya_lantern:",
        "👖": ":jeans:",
        "🔑": ":key:",
        "👘": ":kimono:",
        "📒": ":ledger:",
        "🍋": ":lemon:",
        "💄": ":lipstick:",
        "🔒": ":lock:",
        "🔏": ":lock_with_ink_pen:",
        "🍭": ":lollipop:",
        "➿": ":loop:",
        "📢": ":loudspeaker:",
        "🔅": ":low_brightness:",
        "🔍": ":mag:",
        "🔎": ":mag_right:",
        "🀄": ":mahjong:",
        "📫": ":mailbox:",
        "📪": ":mailbox_closed:",
        "📬": ":mailbox_with_mail:",
        "📭": ":mailbox_with_no_mail:",
        "👞": ":mans_shoe:",
        "🍖": ":meat_on_bone:",
        "📣": ":mega:",
        "🍈": ":melon:",
        "📝": ":memo:",
        "🎤": ":microphone:",
        "🔬": ":microscope:",
        "💽": ":minidisc:",
        "💸": ":money_with_wings:",
        "💰": ":moneybag:",
        "🚵": ":mountain_bicyclist:",
        "🎥": ":movie_camera:",
        "🎹": ":musical_keyboard:",
        "🎼": ":musical_score:",
        "🔇": ":mute:",
        "📛": ":name_badge:",
        "👔": ":necktie:",
        "📰": ":newspaper:",
        "🔕": ":no_bell:",
        "📓": ":notebook:",
        "📔": ":notebook_with_decorative_cover:",
        "🔩": ":nut_and_bolt:",
        "🍢": ":oden:",
        "📂": ":open_file_folder:",
        "📙": ":orange_book:",
        "📤": ":outbox_tray:",
        "📄": ":page_facing_up:",
        "📃": ":page_with_curl:",
        "📟": ":pager:",
        "📎": ":paperclip:",
        "🍑": ":peach:",
        "🍐": ":pear:",
        "✏": ":pencil2:",
        "☎": ":phone:",
        "💊": ":pill:",
        "🍍": ":pineapple:",
        "🍕": ":pizza:",
        "📯": ":postal_horn:",
        "📮": ":postbox:",
        "👝": ":pouch:",
        "🍗": ":poultry_leg:",
        "💷": ":pound:",
        "👛": ":purse:",
        "📌": ":pushpin:",
        "📻": ":radio:",
        "🍜": ":ramen:",
        "🎀": ":ribbon:",
        "🍚": ":rice:",
        "🍙": ":rice_ball:",
        "🍘": ":rice_cracker:",
        "💍": ":ring:",
        "🏉": ":rugby_football:",
        "🎽": ":running_shirt_with_sash:",
        "🍶": ":sake:",
        "👡": ":sandal:",
        "📡": ":satellite:",
        "🎷": ":saxophone:",
        "✂": ":scissors:",
        "📜": ":scroll:",
        "💺": ":seat:",
        "🍧": ":shaved_ice:",
        "👕": ":shirt:",
        "🚿": ":shower:",
        "🎿": ":ski:",
        "🚬": ":smoking:",
        "🏂": ":snowboarder:",
        "⚽": ":soccer:",
        "🔉": ":sound:",
        "👾": ":space_invader:",
        "♠": ":spades:",
        "🍝": ":spaghetti:",
        "🔊": ":speaker:",
        "🍲": ":stew:",
        "📏": ":straight_ruler:",
        "🍓": ":strawberry:",
        "🏄": ":surfer:",
        "🍣": ":sushi:",
        "🍠": ":sweet_potato:",
        "🏊": ":swimmer:",
        "💉": ":syringe:",
        "🎉": ":tada:",
        "🎋": ":tanabata_tree:",
        "🍊": ":tangerine:",
        "🍵": ":tea:",
        "📞": ":telephone_receiver:",
        "🔭": ":telescope:",
        "🎾": ":tennis:",
        "🚽": ":toilet:",
        "🍅": ":tomato:",
        "🎩": ":tophat:",
        "📐": ":triangular_ruler:",
        "🏆": ":trophy:",
        "🍹": ":tropical_drink:",
        "🎺": ":trumpet:",
        "📺": ":tv:",
        "🔓": ":unlock:",
        "📼": ":vhs:",
        "📹": ":video_camera:",
        "🎮": ":video_game:",
        "🎻": ":violin:",
        "⌚": ":watch:",
        "🍉": ":watermelon:",
        "🍷": ":wine_glass:",
        "👚": ":womans_clothes:",
        "👒": ":womans_hat:",
        "🔧": ":wrench:",
        "💴": ":yen:",
        "🚡": ":aerial_tramway:",
        "✈": ":airplane:",
        "🚑": ":ambulance:",
        "⚓": ":anchor:",
        "🚛": ":articulated_lorry:",
        "🏧": ":atm:",
        "🏦": ":bank:",
        "💈": ":barber:",
        "🔰": ":beginner:",
        "🚲": ":bike:",
        "🚙": ":blue_car:",
        "⛵": ":boat:",
        "🌉": ":bridge_at_night:",
        "🚅": ":bullettrain_front:",
        "🚄": ":bullettrain_side:",
        "🚌": ":bus:",
        "🚏": ":busstop:",
        "🚗": ":car:",
        "🎠": ":carousel_horse:",
        "🏁": ":checkered_flag:",
        "⛪": ":church:",
        "🎪": ":circus_tent:",
        "🌇": ":city_sunrise:",
        "🌆": ":city_sunset:",
        "🚧": ":construction:",
        "🏪": ":convenience_store:",
        "🎌": ":crossed_flags:",
        "🏬": ":department_store:",
        "🏰": ":european_castle:",
        "🏤": ":european_post_office:",
        "🏭": ":factory:",
        "🎡": ":ferris_wheel:",
        "🚒": ":fire_engine:",
        "⛲": ":fountain:",
        "⛽": ":fuelpump:",
        "🚁": ":helicopter:",
        "🏥": ":hospital:",
        "🏨": ":hotel:",
        "♨": ":hotsprings:",
        "🏠": ":house:",
        "🏡": ":house_with_garden:",
        "🗾": ":japan:",
        "🏯": ":japanese_castle:",
        "🚈": ":light_rail:",
        "🏩": ":love_hotel:",
        "🚐": ":minibus:",
        "🚝": ":monorail:",
        "🗻": ":mount_fuji:",
        "🚠": ":mountain_cableway:",
        "🚞": ":mountain_railway:",
        "🗿": ":moyai:",
        "🏢": ":office:",
        "🚘": ":oncoming_automobile:",
        "🚍": ":oncoming_bus:",
        "🚔": ":oncoming_police_car:",
        "🚖": ":oncoming_taxi:",
        "🎭": ":performing_arts:",
        "🚓": ":police_car:",
        "🏣": ":post_office:",
        "🚃": ":railway_car:",
        "🌈": ":rainbow:",
        "🚀": ":rocket:",
        "🎢": ":roller_coaster:",
        "🚨": ":rotating_light:",
        "📍": ":round_pushpin:",
        "🚣": ":rowboat:",
        "🏫": ":school:",
        "🚢": ":ship:",
        "🎰": ":slot_machine:",
        "🚤": ":speedboat:",
        "🌠": ":stars:",
        "🌃": ":city-night:",
        "🚉": ":station:",
        "🗽": ":statue_of_liberty:",
        "🚂": ":steam_locomotive:",
        "🌅": ":sunrise:",
        "🌄": ":sunrise_over_mountains:",
        "🚟": ":suspension_railway:",
        "🚕": ":taxi:",
        "⛺": ":tent:",
        "🎫": ":ticket:",
        "🗼": ":tokyo_tower:",
        "🚜": ":tractor:",
        "🚥": ":traffic_light:",
        "🚆": ":train2:",
        "🚊": ":tram:",
        "🚩": ":triangular_flag_on_post:",
        "🚎": ":trolleybus:",
        "🚚": ":truck:",
        "🚦": ":vertical_traffic_light:",
        "⚠": ":warning:",
        "💒": ":wedding:",
        "🇯🇵": ":jp:",
        "🇰🇷": ":kr:",
        "🇨🇳": ":cn:",
        "🇺🇸": ":us:",
        "🇫🇷": ":fr:",
        "🇪🇸": ":es:",
        "🇮🇹": ":it:",
        "🇷🇺": ":ru:",
        "🇬🇧": ":gb:",
        "🇩🇪": ":de:",
        "💯": ":100:",
        "🔢": ":1234:",
        "🅰": ":a:",
        "🆎": ":ab:",
        "🔤": ":abc:",
        "🔡": ":abcd:",
        "🉑": ":accept:",
        "♒": ":aquarius:",
        "♈": ":aries:",
        "◀": ":arrow_backward:",
        "⏬": ":arrow_double_down:",
        "⏫": ":arrow_double_up:",
        "⬇": ":arrow_down:",
        "🔽": ":arrow_down_small:",
        "▶": ":arrow_forward:",
        "⤵": ":arrow_heading_down:",
        "⤴": ":arrow_heading_up:",
        "⬅": ":arrow_left:",
        "↙": ":arrow_lower_left:",
        "↘": ":arrow_lower_right:",
        "➡": ":arrow_right:",
        "↪": ":arrow_right_hook:",
        "⬆": ":arrow_up:",
        "↕": ":arrow_up_down:",
        "🔼": ":arrow_up_small:",
        "↖": ":arrow_upper_left:",
        "↗": ":arrow_upper_right:",
        "🔃": ":arrows_clockwise:",
        "🔄": ":arrows_counterclockwise:",
        "🅱": ":b:",
        "🚼": ":baby_symbol:",
        "🛄": ":baggage_claim:",
        "☑": ":ballot_box_with_check:",
        "‼": ":bangbang:",
        "⚫": ":black_circle:",
        "🔲": ":black_square_button:",
        "♋": ":cancer:",
        "🔠": ":capital_abcd:",
        "♑": ":capricorn:",
        "💹": ":chart:",
        "🚸": ":children_crossing:",
        "🎦": ":cinema:",
        "🆑": ":cl:",
        "🕐": ":clock1:",
        "🕙": ":clock10:",
        "🕥": ":clock1030:",
        "🕚": ":clock11:",
        "🕦": ":clock1130:",
        "🕛": ":clock12:",
        "🕧": ":clock1230:",
        "🕜": ":clock130:",
        "🕑": ":clock2:",
        "🕝": ":clock230:",
        "🕒": ":clock3:",
        "🕞": ":clock330:",
        "🕓": ":clock4:",
        "🕟": ":clock430:",
        "🕔": ":clock5:",
        "🕠": ":clock530:",
        "🕕": ":clock6:",
        "🕡": ":clock630:",
        "🕖": ":clock7:",
        "🕢": ":clock730:",
        "🕗": ":clock8:",
        "🕣": ":clock830:",
        "🕘": ":clock9:",
        "🕤": ":clock930:",
        "㊗": ":congratulations:",
        "🆒": ":cool:",
        "©": ":copyright:",
        "➰": ":curly_loop:",
        "💱": ":currency_exchange:",
        "🛃": ":customs:",
        "💠": ":diamond_shape_with_a_dot_inside:",
        "🚯": ":do_not_litter:",
        "8⃣": ":eight:",
        "✴": ":eight_pointed_black_star:",
        "✳": ":eight_spoked_asterisk:",
        "🔚": ":end:",
        "⏩": ":fast_forward:",
        "5⃣": ":five:",
        "4⃣": ":four:",
        "🆓": ":free:",
        "♊": ":gemini:",
        "#⃣": ":hash:",
        "💟": ":heart_decoration:",
        "✔": ":heavy_check_mark:",
        "➗": ":heavy_division_sign:",
        "💲": ":heavy_dollar_sign:",
        "➖": ":heavy_minus_sign:",
        "✖": ":heavy_multiplication_x:",
        "➕": ":heavy_plus_sign:",
        "🆔": ":id:",
        "🉐": ":ideograph_advantage:",
        "ℹ": ":information_source:",
        "⁉": ":interrobang:",
        "🔟": ":keycap_ten:",
        "🈁": ":koko:",
        "🔵": ":large_blue_circle:",
        "🔷": ":large_blue_diamond:",
        "🔶": ":large_orange_diamond:",
        "🛅": ":left_luggage:",
        "↔": ":left_right_arrow:",
        "↩": ":leftwards_arrow_with_hook:",
        "♌": ":leo:",
        "♎": ":libra:",
        "🔗": ":link:",
        "Ⓜ": ":m:",
        "🚹": ":mens:",
        "🚇": ":metro:",
        "📴": ":mobile_phone_off:",
        "❎": ":negative_squared_cross_mark:",
        "🆕": ":new:",
        "🆖": ":ng:",
        "9⃣": ":nine:",
        "🚳": ":no_bicycles:",
        "⛔": ":no_entry:",
        "🚫": ":no_entry_sign:",
        "📵": ":no_mobile_phones:",
        "🚷": ":no_pedestrians:",
        "🚭": ":no_smoking:",
        "🚱": ":non-potable_water:",
        "⭕": ":o:",
        "🅾": ":o2:",
        "🆗": ":ok:",
        "🔛": ":on:",
        "1⃣": ":one:",
        "⛎": ":ophiuchus:",
        "🅿": ":parking:",
        "〽": ":part_alternation_mark:",
        "🛂": ":passport_control:",
        "♓": ":pisces:",
        "🚰": ":potable_water:",
        "🚮": ":put_litter_in_its_place:",
        "🔘": ":radio_button:",
        "♻": ":recycle:",
        "🔴": ":red_circle:",
        "®": ":registered:",
        "🔁": ":repeat:",
        "🔂": ":repeat_one:",
        "🚻": ":restroom:",
        "⏪": ":rewind:",
        "🈂": ":sa:",
        "♐": ":sagittarius:",
        "♏": ":scorpius:",
        "㊙": ":secret:",
        "7⃣": ":seven:",
        "📶": ":signal_strength:",
        "6⃣": ":six:",
        "🔯": ":six_pointed_star:",
        "🔹": ":small_blue_diamond:",
        "🔸": ":small_orange_diamond:",
        "🔺": ":small_red_triangle:",
        "🔻": ":small_red_triangle_down:",
        "🔜": ":soon:",
        "🆘": ":sos:",
        "🔣": ":symbols:",
        "♉": ":taurus:",
        "3⃣": ":three:",
        "™": ":tm:",
        "🔝": ":top:",
        "🔱": ":trident:",
        "🔀": ":twisted_rightwards_arrows:",
        "2⃣": ":two:",
        "🈹": ":u5272:",
        "🈴": ":u5408:",
        "🈺": ":u55b6:",
        "🈯": ":u6307:",
        "🈷": ":u6708:",
        "🈶": ":u6709:",
        "🈵": ":u6e80:",
        "🈚": ":u7121:",
        "🈸": ":u7533:",
        "🈲": ":u7981:",
        "🈳": ":u7a7a:",
        "🔞": ":underage:",
        "🆙": ":up:",
        "📳": ":vibration_mode:",
        "♍": ":virgo:",
        "🆚": ":vs:",
        "〰": ":wavy_dash:",
        "🚾": ":wc:",
        "♿": ":wheelchair:",
        "✅": ":white_check_mark:",
        "⚪": ":white_circle:",
        "💮": ":white_flower:",
        "🔳": ":white_square_button:",
        "🚺": ":womens:",
        "❌": ":x:",
        "0⃣": ":zero:",
        "🙃": ":topple:",
        "🏻":":skinColor1:",
        "🏼":":skinColor2:",
        "🏽":":skinColor3:",
        "🏾":":skinColor4:",
        "🏿":":skinColor5:"
      }
      if(!str) {
          return str;
      }else {
        let regStr = /(:[a-z A-Z 0-9 -+_]+:)/;  
        let arr = str.split(regStr);
        let arrValue = [];
        arr.forEach((item,index)=>{
            if(item.length > 0) {
                return arrValue.push(item);
            }
        })
        for (const key in arrValue) {
            if (arrValue.hasOwnProperty(key)) {
                const emojiValue = arrValue[key];
                for (const k in emoji) {
                    const v = emoji[k];
                    if(v == emojiValue) {
                        arrValue.splice(key,1,k);
                    }
                    else if(Array.isArray(v)  && v.includes(emojiValue)) {
                        arrValue.splice(key,1,k);
                    }
                }
            }
        }
        return arrValue;
      }
    },
    getUserTypeText(type,hasProfession,profession){
      let data = {
            txt:'',
            class:''
          }
      switch(type){
        case 1:
          data.txt = '学生'
          data.class = 'studentStyle'
          break
        case 2:
          data.txt = hasProfession===true ? profession : '家长'
          data.class = hasProfession===true ? 'teacherStyle' : 'parentStyle'
          break
        default:
          data.txt = '神秘人'
          data.class = 'secretStyle'
      }
      return data
    }
  }
};
</script>
<style lang="scss">
@import "../styles/mixin.scss";
.no-reply{
  color:#999999;
  font-size:px2rem(28);
}
.clear {
  clear: both;
  overflow: hidden;
}
.layout {
  width: px2rem(660);
  margin: px2rem(0) auto;
  .icon{
    border-radius: 50%;
    border:0.5px solid rgba(0,0,0,.1);
    box-sizing: border-box;
  }
  .userTypeTag{
    width:px2rem(74);
    height: px2rem(32);
    position: absolute;
    top: px2rem(64);
    left: 50%;
    transform: translateX(-50%);
    border-radius: px2rem(20);
    font-size: px2rem(22);
    line-height: px2rem(30);
    color:#FFF;
    text-align: center;
    font-style: normal;
  }
  .studentStyle{ background: #FF9028; }
  .teacherStyle{ background: #14ADFF; }
  .parentStyle{ background: #FF6B6D; }
  .avatar{
    width: 100%;
    height: 100%;
    border-radius: px2rem(72);
    overflow: hidden;
  }
}
.topic-detail {
  .topic-header {
    border-bottom: px2rem(18) solid #f4f5f7;
    .title {
      margin: px2rem(22) auto;
      font-size: px2rem(48);
      line-height: px2rem(66);
      color: #0e0404;
      word-break: break-all;
    }
    .author-info {
      position: relative;
      &::after{
          content: "";
          display: block;
          width: 100%;
          height: 0;
          clear: both;
        }
      .icon {
        position: relative;
        float: left;
        width: px2rem(84);
        height: px2rem(84);
        img {
          width: auto;
          height: px2rem(84);
          margin: 0 auto;
        }
      }
      .info {
        float: left;
        max-width: px2rem(576);
        .line-f {
          font-size:0;
          span {
            display: inline-block;
            &.name {
              max-width: px2rem(456);
              font-size: px2rem(28);
              color: #333333;
              line-height: px2rem(40);
              margin-left: px2rem(20);
              text-overflow: ellipsis;
              word-break: keep-all;
              white-space: nowrap;
              overflow: hidden;
            }
            &.subject {
              height: px2rem(30);
              border: px2rem(2) solid #ef4c4f;
              border-radius: px2rem(30);
              padding: px2rem(0) px2rem(12);
              font-size: px2rem(22);
              color: #ef4c4f;
              line-height: px2rem(30);
              text-align: center;
              margin-left: px2rem(20);
            }
          }
        }
        .line-t{
          margin: px2rem(12) 0 px2rem(12) px2rem(20);
          width:px2rem(556);
          height: px2rem(50);
          overflow: hidden;
          i{
            display: inline-block;
            margin-right: px2rem(12);
            margin-bottom: px2rem(4);
            padding:px2rem(12) px2rem(16);
            font-style: normal;
            background: #FFFFFF;
            border: 1px solid #CCCCCC;
            border-radius: px2rem(25);
            font-size: px2rem(22);
            line-height: px2rem(22);
            text-align: center;
            box-sizing: border-box;
            vertical-align: top;
            color:#999;
            &.lastTag{
              margin-right: 0;
              overflow: hidden;
              white-space: nowrap;
              word-break: keep-all;
              text-overflow: ellipsis;
            }
          }
        }
        .line-s {
          font-size: 0;
          span {
            display: inline-block;
            font-size: px2rem(24);
            color: #999999;
            line-height: px2rem(33);
            &.time {
              margin-left: px2rem(20);
            }
            &.from {
              margin-left: px2rem(15);
            }
          }
        }
      }
      .focus {
        position: absolute;
        top:0;
        right: 0;
        font-size: px2rem(28);
        line-height: px2rem(40);
        color: #ef4c4f;
      }
    }
    .author-topic {
      font-size: px2rem(32);
      color: #333333;
      line-height: px2rem(48);
      word-break: break-all;
      margin: px2rem(20) auto px2rem(34);
    }
    .pictureList {
      clear: both;
      overflow: hidden;
      margin-bottom: px2rem(32);
      .inner-pics {
        float: left;
        width: px2rem(220);
        height: px2rem(220);
        overflow: hidden;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
        margin: px2rem(5) px2rem(5);
        img {
          min-width: px2rem(220);
          height: px2rem(220);
          margin: 0 auto;
        }
      }
      .img-wrap {
        span{
          float: left;
          width: px2rem(220);
          height: px2rem(220);
          margin: px2rem(5) px2rem(5);
        }
      }
    }
    .author-stars {
      margin-bottom: px2rem(32);
      ul {
        li {
          &.left {
            float: left;
          }
          &.right {
            float: right;
          }
          span {
            font-size: px2rem(24);
            color: #999999;
            line-height: px2rem(34);
            display: block;
            &.watch {
              padding-left: px2rem(46);
              background: url(../assets/image/topicDetail/watch.png)
                no-repeat center left;
              background-size: px2rem(32) px2rem(32);
            }
            &.ping {
              padding-left: px2rem(42);
              background: url(../assets/image/topicDetail/ping.png)
                no-repeat center left;
              background-size: px2rem(32) px2rem(32);
            }
            &.zan {
              margin-left: px2rem(40);
              padding-left: px2rem(38);
              background: url(../assets/image/topicDetail/zan.png)
                no-repeat center left;
              background-size: px2rem(32) px2rem(32);
            }
          }
        }
      }
    }
  }
  .topic-list {
    margin-bottom: px2rem(130);
    .topic-tit {
      font-size: px2rem(30);
      color: #333333;
      line-height: px2rem(42);
      font-weight: bold;
      margin-top: px2rem(20);
    }
    .topic-ul {
      clear: both;
      overflow: hidden;
      li {
        float: left;
        width: 100%;
        padding-top: px2rem(40);
        .person_li {
          &::after{
            content: "";
            display: block;
            width: 100%;
            height: 0;
            clear: both;
          }
          .icon {
            position: relative;
            width: px2rem(84);
            height: px2rem(84);
            float: left;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            align-items: center;
            img {
              height: px2rem(84);
              margin: 0 auto;
            }
          }
          .person_info {
            float: left;
            margin-left: px2rem(20);
            width: px2rem(556);
            span {
              display: block;
              &.info_name_time {
                float: left;
                max-width: px2rem(414);
                .name {
                  width: 95%;
                  height: px2rem(40);
                  overflow: hidden;
                  text-overflow: ellipsis;
                  word-break: keep-all;
                  white-space: nowrap;
                  line-height: px2rem(40);
                  font-size: px2rem(28);
                  color: #333333;
                }
                .time {
                  margin:px2rem(10) 0 px2rem(17);
                  font-size: px2rem(24);
                  color: #999999;
                  line-height: px2rem(33);
                }
              }
              &.ping {
                color: #999999;
                float: right;
                height: px2rem(28);
                line-height: px2rem(28);
                padding-left: px2rem(42);
                background: url(../assets/image/topicDetail/ping.png)
                  no-repeat center left;
                background-size: px2rem(32) px2rem(32);
              }
              &.zan {
                float: right;
                height: px2rem(28);
                line-height: px2rem(28);
                margin-left: px2rem(40);
                padding-left: px2rem(38);
                background: url(../assets/image/topicDetail/zan.png)
                  no-repeat center left;
                background-size: px2rem(32) px2rem(32);
                font-size: px2rem(24);
                color: #999999;
              }
            }
          }
        }
        .ping_li {
          margin: px2rem(20) auto 0 px2rem(104);
          border-bottom: px2rem(1) solid #eeeeee;
          padding-bottom: px2rem(40);
          p {
            font-size: px2rem(30);
            color: #333333;
            line-height: px2rem(42);
            margin-bottom: px2rem(20);
            word-break: break-all;
          }
          .comment-pics {
            clear: both;
            overflow: hidden;
            // margin: px2rem(10) auto;
            .inner-pics {
              float: left;
              width: px2rem(190);
              height: px2rem(190);
              overflow: hidden;
              margin: px2rem(10) px2rem(8) px2rem(10) 0;
              img {
                width: auto;
                height: px2rem(190);
                margin: 0 auto;
              }
            }
          }
          .comment-list {
            background: #f5f5f5;
            border-radius: px2rem(2);
            margin-top: px2rem(20);
            .comment-ul {
              clear: both;
              overflow: hidden;
              padding: px2rem(20) px2rem(20) px2rem(10);
              li {
                font-size: 14px;
                line-height: px2rem(40);
                color: #333333;
                padding-top: 0;
                margin: 0 0 px2rem(10);
                b {
                  font-weight: normal;
                  color: #ef4c4f;
                }
              }
            }
          }
        }
      }
      li:last-child {
        .ping_li {
          border-bottom: none;
        }
      }
    }
    .no-data {
      margin-top: px2rem(100);
      text-align: center;
      img {
        width: px2rem(200);
      }
    }
  }
  .download {
    // width: 100%;
    position: fixed;
    bottom: px2rem(0);
    z-index: 9;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: px2rem(20);
    height: px2rem(100);
    .download-left {
      margin-left: px2rem(10);
      display: flex;
      .download-logo {
        width: px2rem(90);
        height: px2rem(90);
        border-radius: px2rem(15);
        overflow: hidden;
        img {
          width: px2rem(90);
          height: px2rem(90);
        }
      }
      .download-text {
        line-height: px2rem(40);
        margin-left: px2rem(15);
        width: px2rem(370);
        p {
          margin-top: px2rem(5);
          font-size: px2rem(28);
          color: #111;
        }
        span {
          font-size: px2rem(20);
          color: #111;
        }
      }
    }
    .download-right {
      margin-right: px2rem(50);
      display: flex;
      flex-direction: row;
      .down {
        width: px2rem(160);
        height: px2rem(56);
        margin-right: px2rem(20);
      }
      .close {
        width: px2rem(32);
        height: px2rem(32);
        position: relative;
        top: px2rem(10);
      }
    }
  }
}
</style>
